<template>
  <div class="banner">
    <div class="page-header">
      <h1>
        <span>Gene Data</span>
        <br />
        <!-- <div></div> -->
        <small>
          a curated resource of genome-wide variant-trait associations</small
        >
      </h1>
    </div>
    <div class="page-navbar">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#419640"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <template v-for="item in sidebarList">
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
              <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu
                  v-if="subItem.subs"
                  :index="subItem.index"
                  :key="subItem.index"
                >
                  <template #title>{{ subItem.title }}</template>
                  <el-menu-item
                    v-for="(threeItem, i) in subItem.subs"
                    :key="i"
                    :index="threeItem.index"
                    >{{ threeItem.title }}</el-menu-item
                  >
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="subItem.index"
                  :key="subItem.index"
                  >{{ subItem.title }}</el-menu-item
                >
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script setup>
import { ref } from '@vue/reactivity'
const activeIndex = ref('/gene-data/home')
const sidebarList = [
  {
    icon: 'el-icon-s-home',
    index: '/gene-data/home',
    title: 'Home'
  },
  {
    icon: 'el-icon-s-data',
    index: '/gene-data/browse',
    title: 'Browse',
    subs: [
      {
        index: '/gene-data/species',
        title: 'Species'
      },
      {
        index: '/gene-data/associations',
        title: 'Associations'
      },
      {
        index: '/gene-data/variants',
        title: 'Variants'
      },
      {
        index: '/gene-data/genes',
        title: 'Genes'
      },
      {
        index: '/gene-data/studies',
        title: 'Studies'
      },
      {
        index: '/gene-data/publications',
        title: 'Publications'
      }
    ]
  },
  {
    icon: 'el-icon-upload2',
    index: '/gene-data/uploads',
    title: 'Uploads'
  },

  {
    icon: 'el-icon-s-order',
    index: '/gene-data/documentation',
    title: 'Documentation'
  }
]
</script>
<style scoped lang="scss">
.banner {
  width: 100%;
  height: 180px;
  background: url('../assets/img/header.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -5px;
  position: relative;
  h1 {
    color: #f5f5f5;
    font-size: 42px;
    margin-left: 35px;
    padding-top: 20px;
    text-shadow: 2px 2px 0 #555555;
    position: relative;
    span {
      font-weight: bold;
    }
    div {
      line-height: 0.2;
    }
    small {
      color: rgba(220, 225, 225, 0.85);
      font-size: 20px;
      position: absolute;
      top: 80px;
    }
  }
  .page-navbar {
    position: absolute;
    height: 50px;
    font-size: 16px;
    // margin-left: 20px;
    margin-bottom: 10px;
    bottom: 0;
    ::v-deep {
      .el-submenu__icon-arrow,
      .el-icon-arrow-down {
        color: #fff;
      }
    }
    i {
      color: #fff;
      margin-top: -3px;
    }
    .el-menu {
      .el-menu-item {
        font-size: 16px;
        color: #fff;
      }
    }
  }
}
</style>
